<template>
    <div>
        <a-row>
            <a-card title="用户信息">
                <!--<a href="#" slot="extra" @click="() => { $router.go(-1) }">返回</a>-->
                <a-row>
                    <a-col span="6">
                        姓名：{{data.house_user.name}}
                    </a-col>
                    <a-col span="6">
                        小区：{{data.bd_info_text}}
                    </a-col>
                    <a-col span="6">
                        楼宇：{{data.buiding_text}}
                    </a-col>
                    <a-col span="6">
                        房号：{{data.house_text}}
                    </a-col>
                </a-row>
                <a-row>
                    <a-col span="6">
                        手机号：{{data.house_user.phone}}
                    </a-col>
                    <a-col span="6">
                        收款状态：{{data.status_text}}
                    </a-col>
                    <a-col span="6">
                        收费日期：{{data.pay_time}}
                    </a-col>
                    <a-col span="6">
                        操作员：{{data.action_user}}
                    </a-col>
                </a-row>
                <a-row>
                    <a-col span="6">
                        收款方式：{{data.pay_style_text}}
                    </a-col>
                    <a-col>
                        收款备注：{{data.remarks}}
                    </a-col>
                </a-row>
            </a-card>

        </a-row>
        <br>
        <!--<a-card title="费项明细" :tabList="tabList" rowKey="id" :activeTabKey="key" @tabChange="key => onTabChange(key, 'key')">-->
        <!--<s-table ref="table"-->
        <!--:columns="columns"-->
        <!--:rowSelection="rowSelection"-->
        <!--:data="dataSource"-->
        <!--:loading="loading"-->
        <!--:scroll="{ x: 1500, y: 800 }"-->
        <!--&gt;-->
        <!--</s-table>-->
        <!--</a-card>-->
        <a-row>
            <a-card title="费项明细">
                <a-button class="shou_color" @click="print_c" slot="extra">打印</a-button>
                <a-modal title="打印" :visible="print_lop" :width="600" @ok="ok_print" @cancel="cancel_print">
                    <a-row>
                        <a-col span="15">
                            模板：
                            <a-select style="width: 240px" @change="print_func">
                                <a-select-option v-for="(item,i) in modelList" :key="i">
                                    {{item.name}}
                                </a-select-option>
                            </a-select>
                        </a-col>
                    </a-row>
                </a-modal>
                <s-table
                        :columns="columns"
                        :data="dataSource"
                        ref="table"
                        rowKey="id"
                        :scroll="{ x: 1400}"
                        >
                    <template slot="remark_list" slot-scope="text, record">
                        <a-tooltip placement="left">
                            <template slot="title">
                                <p v-for="(item,index) in record.remark_list">{{item}}</p>
                            </template>
                            <a-icon type="bars" style="cursor: pointer;">{{text}}</a-icon>
                        </a-tooltip>
                    </template>
                    <template slot="bd_info_id_text" slot-scope="text, record">
                        <span>{{text}}</span><br/>
                        <span v-if="record.bd_info_id_text_t">({{record.bd_info_id_text_t}})</span>
                    </template>
                    <template slot="name" slot-scope="text, record">
                        <span>{{text}}</span><br/>
                        <span>{{record.start_time}}</span><br/>
                        <span>{{record.end_time}}</span>
                    </template>
                    <template slot="one_money" slot-scope="text">
                        ¥{{text}}
                    </template>
                    <template slot="offer" slot-scope="text">
                        ¥{{text}}
                    </template>
                    <template slot="overdue" slot-scope="text">
                        ¥{{text}}
                    </template>
                    <template slot="money" slot-scope="text">
                        ¥{{text}}
                    </template>
                    <template slot="pay_style_text" slot-scope="text, record">
                        <span>{{text}}</span><br/>
                        <span>({{record.pay_time}})</span>
                    </template>
                    <template slot="price" slot-scope="text, record">
                        <a-tooltip placement="right">
                            <template slot="title">
                                <p>单价：¥{{record.one_money}}</p>
                                <p>数量：{{record.num}}</p>
                            </template>
                            <span>¥{{text}}</span>
                        </a-tooltip>
                    </template>
                </s-table>
                <a-row style="height:45px;background-color: #fafafa;border-bottom: 1px solid #e8e8e8" type="flex" justify="center" >
                    <a-col span="12"></a-col>
                    <a-col span="4" align="center" style="line-height:45px">
                        统计：
                    </a-col>
                    <a-col class="tdx_w" span="4" align="center" style="line-height:45px">
                        应收金额
                    </a-col>
                    <a-col class="tdx_w" span="4" align="center" style="line-height:45px">
                        实收金额
                    </a-col>

                </a-row>
                <a-row style="height:45px;background-color: #fafafa;" type="flex" justify="center" >
                    <a-col span="12"></a-col>
                    <a-col span="4" align="center" style="line-height:45px">
                        小计：
                    </a-col>
                    <a-col class="tdx_w" span="4" align="center" style="line-height:45px">
                        ¥{{xp}}
                    </a-col>
                    <a-col class="tdx_w" span="4" align="center" style="line-height:45px">
                        ¥{{xm}}
                    </a-col>

                </a-row>
                <a-row style="height:45px;background-color: #fafafa;" type="flex" justify="center" >
                    <a-col span="12"></a-col>
                    <a-col span="4" align="center" style="line-height:45px">
                        合计：
                    </a-col>
                    <a-col class="tdx_w" span="4" align="center" style="line-height:45px">
                        ¥{{ps}}
                    </a-col>
                    <a-col class="tdx_w" span="4" align="center"  style="line-height:45px">
                        ¥{{ms}}
                    </a-col>

                </a-row>
            </a-card>
        </a-row>
        <div v-show="false" id="model_t">
            <div style="font-size: 20px;text-align: center;font-weight:bold;">{{print_model.name}}</div><br/>
            <table style="width: 100%; border-collapse: collapse;">
                <thead>
                <tr style="border-bottom: 1px solid #000000;">
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">房屋/车位/车辆</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">缴费人</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">收费项目</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">应缴金额</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">实收金额</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">支付时间</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">状态</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">操作员</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">备注</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{data.info}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{data.user_text}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{data.name}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{data.price}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{data.money}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{data.pay_time}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{data.status_text}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{data.action_user}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{data.remarks}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    import { pay_det,dep_det } from '@/api/cashier'
    import { mapGetters } from 'vuex'
    import { getLodop } from '@/utils/LodopFuncs'
    import {STable} from '@/components'
    const recordData = []
    const data = [];
    export default {
        name: 'charge_be_pay_detail',
        components: {
            STable
        },
        data() {
            return {
                modelList: [],
                data:[],
                form: this.$form.createForm(this),
                payform: this.$form.createForm(this),
                formTime: this.$form.createForm(this),
                key: '欠费',
                recordColumns:{},
                selectArr:[],
                parameterA:{},
                print_lop:false,
                print_m: false,
                print_model:[],
                columns: [
                    { title: '状态', width: 100, dataIndex: 'status' },
                    { title: '类型', width: 100, dataIndex: 'type' },
                    // { title: '小区/楼宇', width: 100, dataIndex: 'bd_info_id_text',scopedSlots: { customRender: 'bd_info_id_text' } },
                    { title: '房号/车位号/车牌', width: 150, dataIndex: 'info' },
                    { title: '费用名称', width: 200, dataIndex: 'name' },
                    { title: '开始时间', width: 100, dataIndex: 'start_time' },
                    { title: '结束时间', width: 100, dataIndex: 'end_time' },
                    { title: '单价', width: 100,align:'right', dataIndex: 'one_money',scopedSlots: { customRender: 'one_money' } },
                    { title: '数量', width: 100, dataIndex: 'num' },
                    { title: '应收金额', width: 100,align:'right', dataIndex: 'price',scopedSlots: { customRender: 'price' } },
                    { title: '优惠金额', width: 100,align:'right', dataIndex: 'offer',scopedSlots: { customRender: 'offer' } },
                    { title: '滞纳金', width: 100,align:'right', dataIndex: 'overdue',scopedSlots: { customRender: 'overdue' } },
                    { title: '折扣', width: 100, dataIndex: 'deduction' },
                    // { title: '缴费人', width: 150, dataIndex: 'user_id_name',align:'center' },
                    // { title: '收款方式', width: 200, dataIndex: 'pay_style_text' },
                    { title: '实收金额', width: 100, dataIndex: 'money',scopedSlots: { customRender: 'money' } },
                    // { title: '操作员', width: 150, dataIndex: 'action_user' },
                    { title: '备注', width: 150, dataIndex: 'remark_list',scopedSlots: { customRender: 'remark_list' } },
                ],
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 6 }
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 15 }
                },
                infoData: {
                    bd_info_text: '暂无',
                    building_text: '暂无',
                    name: '暂无',
                    labels: '暂无',
                    ratio: '暂无',
                    users: [],
                    user_text: '暂无'
                },
                ps:0,
                ms:0,
                xp:0,
                xm:0,
                xd:0,
                deu:0,
                loading:false,
                spinning:false,
                pas:[],
                queryParam: {},
                dataSource:parameter => {
                    this.pas = parameter;
                    return this.getList(Object.assign(parameter, {payment_id:this.$route.params.id}))
                        .then(res => {
                            return res
                        })
                },
            }
        },

        mounted() {
            this.getPayDet();
            this.getDepInfo();
        },
        methods: {
            ...mapGetters(['token', 'pmsArId', 'nowMg']),
            getList(param) {
                return new Promise((resolve,reject) => {
                    this.axios({
                        method:'get',
                        url: '/cashier/get_pay_store_list',
                        params:Object.assign(param,{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()})
                    }).then(res => {
                        if(res.code === 0){
                            resolve(res.data);
                            this.ps = res.data['ps'];
                            this.ms = res.data['ms'];
                            this.deu = res.data['deu'];
                            this.xd = res.data['xd'];
                            this.xp = res.data['x_p'];
                            this.xm = res.data['x_m'];
                        }else{
                            this.$message.error(res.data.msg,2);
                        }
                    }).catch(err => {
                        this.$message.error('服务器发生错误...',2);
                        this.loading = false;
                    })
                })
            },
            // 获取基础信息
            getPayDet() {
                pay_det({id: this.$route.params.id,token:this.token(),type:1}).then(res => {
                    this.data = res.data;
                    this.selectArr = res.data;
                }).catch(err => {
                    console.log(err)
                })
            },
            print_func(v){
                this.print_m = v + 1;
                this.print_model = this.modelList[v];
            },
            getDepInfo() {
                dep_det({token:this.token()}).then(res => {
                    this.modelList = res.data.model;
                }).catch(err => {
                    console.log(err)
                })
            },
            print_plus(v){
                this.print_p = v;
            },
            print_c(){
                LODOP = getLodop();
                this.print_lop = true;
            },
            ok_print() {
                if (this.print_m) {
                    LODOP = getLodop();
                    LODOP.PRINT_INIT("打印通知单");
                    LODOP.ADD_PRINT_HTM(this.print_model.range_t,this.print_model.range_l,600,300,document.getElementById("model_t").innerHTML);
                    LODOP.SET_PRINT_PAGESIZE(this.print_model.layout,this.print_model.p_width,this.print_model.p_height,'A'+this.print_model.paper_type);
                    var lit = this.selectArr;
                    let money = this.data.money;
                    LODOP.ADD_PRINT_TEXT(200 + 10,25,300,20,"合计：￥" + money);
                    LODOP.ADD_PRINT_TEXT(220 + 10,25,300,20,"说明：所有款项请限缴费日期之前缴清");
                    // LODOP.ADD_PRINT_TEXT(240 + (30 * lit.length),480,300,20,"扫码支付");
                    LODOP.PREVIEW();
                } else {
                    this.$message.error('请选择模板');
                }
            },
            cancel_print() {
                this.print_lop = false;
            },
        }
    }
</script>

<style scoped>
    .shou_color{
        color: #fff;
        background-color: #47c479;
        border-color: #47c479;
    }
</style>